<template>
  <div class="diagnose_6b_form">
    <el-form :model="form" :rules="rules" label-position="right" label-width="220px" size="small" disabled>
      <el-form-item label="是否有离院运营" prop="hasDischargeOperations">
        <span v-if="form.hasDischargeOperations === -1">未设置</span>
        <span v-else-if="form.hasDischargeOperations === 1">是</span>
        <span v-else>否</span>
      </el-form-item>
      <el-form-item label="是否有专人做离院运营" prop="hasDischargeOperations">
        <span v-if="form.dedicatedDischargeOperations === -1">未设置</span>
        <span v-else-if="form.dedicatedDischargeOperations === 1">是</span>
        <span v-else>否</span>
      </el-form-item>
      <el-form-item label="运营执行人" prop="operationExecutor">
        <span>{{ baseEnums.functionality.find(item => item.code === form.operationExecutor)?.name || '未设置' }}</span>
      </el-form-item>
      <el-form-item label="离院运营是否达到预期" prop="dischargeOperationsMetExpectations">
        <span v-if="form.dischargeOperationsMetExpectations === -1">未设置</span>
        <span v-else-if="form.dischargeOperationsMetExpectations === 1">是</span>
        <span v-else>否</span>
      </el-form-item>
      <el-form-item label="运营亮点">
        <el-input
          v-model="form.operationHighlights"
          type="textarea"
          maxlength="128"
          show-word-limit
          style="width: 220px"></el-input>
      </el-form-item>
      <el-form-item label="运营不足">
        <el-input
          v-model="form.operationWeaknesses"
          type="textarea"
          maxlength="128"
          show-word-limit
          style="width: 220px"></el-input>
      </el-form-item>
      <el-form-item label="运营动作">
        <el-input
          v-model="form.operationActions"
          type="textarea"
          maxlength="128"
          show-word-limit
          style="width: 220px"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
// 引入后端 API
import { getOpaBDiagnoseByNo, getOpaBEnums } from '@/api/diagnose';
// 引入自定义组件
import '@/utils/datefmt';
// 引入第三方组件
import { MessageBox } from 'element-ui';
import { mapGetters } from 'vuex';

const EmptyOpaBData = {
  id: undefined,
  hasDischargeOperations: false, // NOT NULL
  dedicatedDischargeOperations: false, // NOT NULL
  operationExecutor: undefined, // NOT NULL
  dischargeOperationsMetExpectations: false, // NOT NULL
  operationHighlights: '',
  operationWeaknesses: '',
  operationActions: '',
  coachId: null,
  coachName: null,
};

export default {
  name: 'Diagnose6b',
  data() {
    return {
      baseEnums: {},
      salon: {},
      form: EmptyOpaBData,
      rules: {},
      isUpdating: false,
      isFetching: false,
    };
  },
  computed: {
    ...mapGetters(['deptId', 'openId', 'id', 'name']),
  },
  created() {
    this.loadOpaBEnums();
  },
  methods: {
    loadOpaBEnums: async function () {
      const errAlertMsg = '查询类型失败';
      getOpaBEnums()
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          if (ret) {
            this.baseEnums = Object.assign({}, ret);
          }
        })
        .catch(err => {
          console.log('getStaffEnums', err);
          MessageBox.alert(errAlertMsg);
        });
    },
    loadDiagnoseData: async function (salon /* {salonId: '', salonNo: '', salonName: '', diagnoseNo: ''} */) {
      if (!salon || !salon.diagnoseNo) {
        return;
      }
      this.salon = Object.assign({}, salon);
      this.loadDiagnose6b();
    },
    loadDiagnose6b: async function () {
      if (this.isFetching) {
        return;
      }
      this.isFetching = true;
      this.form = Object.assign({}, EmptyOpaBData);
      const errAlertMsg = '查询B活动复盘信息失败';
      await getOpaBDiagnoseByNo(this.salon.diagnoseNo)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          if (ret) {
            this.form = Object.assign({}, ret);
          }
        })
        .catch(err => {
          console.log('getOpaBDiagnoseByNo', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.isFetching = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.diagnose_6b_form {
  color: inherit;
}
.diagnose_6b_form label {
  width: 90px;
  color: #99a9bf;
}
.diagnose_6b_form .el-form-item {
  margin-right: 0;
  margin-bottom: 5px;
  width: 50%;
}
</style>
